<template>
  <div class="top">
    <div class="select">
      请选择城市：<el-cascader
        size="large"
        :options="pcTextArr"
        v-model="selectedOptions"
        @change="handleChange"
      >
      </el-cascader>
    </div>

    <div class="left">
      <el-button type="success" @click="goHome" plain>首页</el-button>
    </div>
    <div class="city">
      天&nbsp;气&nbsp;预&nbsp;报&nbsp;数&nbsp;据&nbsp;大&nbsp;屏
    </div>
    <div class="time">当前时间:{{ timer }}</div>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import moment from 'moment'
//点击首页按钮回到首页
import { useRouter } from 'vue-router'
import { ref, onMounted, onBeforeUnmount } from 'vue'

import { pcTextArr } from 'element-china-area-data'
let selectedOptions = ref(['北京市', '海淀区'])
//获取路由器对象
let $router = useRouter()

//存储当前时间
let timer = ref('')

//按钮的点击回调
const goHome = () => {
  $router.push('/home')
}
//组件挂载完毕更新当前的事件
onMounted(() => {
  getCurrentDateTime()
  // 每秒更新一次日期时间
  setInterval(getCurrentDateTime, 1000)
})

const getCurrentDateTime = () => {
  const now = new Date()

  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, '0')
  const day = now.getDate().toString().padStart(2, '0')

  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const seconds = now.getSeconds().toString().padStart(2, '0')

  timer.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
}

onBeforeUnmount(() => {
  // clearInterval(timer.value)
})
const emit = defineEmits(['getdata'])
const handleChange = () => {
  if (selectedOptions.value[1].includes('区')) {
    emit('getdata', selectedOptions.value[0])
  } else {
    emit('getdata', selectedOptions.value[1])
  }
}
</script>

<style scoped lang="less">
.top {
  width: 100%;
  height: 80px;
  /* background-color: #666; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
  .select {
    padding-top: 15px;
    padding-left: 50px;
  }
  .left {
    padding-left: 4%;
    margin-right: 5%;
    padding-top: 16px;
  }
  .city {
    line-height: 80px;
    border-radius: 15px;
    background-color: bisque;
    font-size: 30px;
    padding-left: 25px;
    margin-top: 30px;
    padding-right: 25px;
  }
  .time {
    padding-top: 25px;
    padding-left: 60px;
  }
}
</style>
